<template>
  <div>
    <el-row class="tac" style="min-height:600px">
      <el-col :span="5">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="fid"
          ref="menutree"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
          @node-click="onCheck"
        >
        </el-tree>
      </el-col>
      <el-col :span="19">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>按钮权限</span>
          </div>

          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="按钮编码" prop="actionCode">
            </el-table-column>
            <el-table-column label="按钮名称" prop="actionName">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <div class="footer">
      <a-button type="primary" @click="confirm()" style="margin-right: 10px;"
        >确定</a-button
      >
      <a-button @click="close()">关闭</a-button>
    </div>
  </div>
</template>
<script>
import { LoadRoleMenuPower, SavePower } from '@/api/tappRole'
import {
  queryByRoleMenuId,
  delActionRole,
  getActionByMenuId,
  saveActionRole
} from '@/api/menuAction'

export default {
  props: ['roleID'],
  data() {
    return {
      treeData: [],
      checkedKeys: [],
      tableData: [],
      selectmenu: {},
      selectedActionList: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  methods: {
    onCheck(checknode) {
      if (checknode.code !== this.selectmenu.code) {
        this.selectmenu = checknode
        this.loadRoleMenuButton()
      } else {
        this.tableData = []
      }
    },
    addMenuButton() {
      getActionByMenuId(this.checkednode.fid).then(res => {
        this.menuActionDatalist = res.data
      })
      this.$refs.roleMenuActiondialog.visible = true
    },
    clickActionItem(actionId) {
      if (this.selectedActionList.indexOf(actionId) < 0) {
        this.selectedActionList.push(actionId)
      } else {
        this.selectedActionList.splice(
          this.selectedActionList.indexOf(actionId),
          1
        )
      }
    },
    delMenuButton(rowdata) {
      const param = {
        id: rowdata.fid
      }
      delActionRole(param).then(res => {
        console.log(res)
        this.$message.success('删除成功！')
        this.loadRoleMenuButton()
      })
    },
    submitActionRole() {
      const param = {
        roleId: this.roleID,
        actionList: this.selectedActionList
      }
      saveActionRole(param).then(res => {
        console.log(res)
        this.loadRoleMenuButton()
        this.$message.success('操作成功!')
      })
    },
    loadRoleMenuButton() {
      if (this.selectmenu.typeid === 4) {
        queryByRoleMenuId(this.roleID, this.selectmenu.fid).then(res => {
          this.tableData = res.data
          for (let i = 0; i < res.data.length; i++) {
            const item = res.data[i]
            if (this.selectedActionList.indexOf(item.actionId) < 0) {
              this.selectedActionList.push(item.actionId)
            }
          }
        })
      }
    },
    LoadData() {
      LoadRoleMenuPower(this.roleID).then(res => {
        this.checkedKeys = res.data.powermenu
        this.treeData = res.data.menulist
      })
    },
    confirm() {
      const checkedKeylist = this.$refs.menutree.getCheckedKeys()
      const param = {
        PowerParam: JSON.stringify(checkedKeylist),
        RoleFID: this.roleID
      }
      SavePower(param).then(res => {
        this.$message.success('保存成功！')
        this.$emit('confirm', res)
      })
    },
    close() {
      this.$emit('close')
    }
  },
  mounted() {
    this.LoadData()
  }
}
</script>
<style lang="less">
.footer {
  margin-bottom: 10px;
  height: 50px;
  margin-top: -50px;
  float: right;
}
.menuButton {
  height: 200px;
}
.menuButton span {
  margin: 5px;
}
</style>
